<template>
  <div class="app-container">
    <!-- 表头操作表单 -->
    <div class="table-header">
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="small"
              @click="handleSave()"
              >添加</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 添加/修改表单 -->
    <div>
      <el-dialog
        :title="sysMenu.id ? '修改菜单' : '添加菜单'"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="sysMenu">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="sysMenu.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级菜单" :label-width="formLabelWidth">
            <el-select v-model="sysMenu.parentId" placeholder="请选择父级菜单">
              <el-option
                v-for="(item, index) in parentMenu"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <el-select v-model="sysMenu.type" placeholder="请选择菜单类型">
              <el-option
                v-for="(item, index) in menuTypeList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路由地址" :label-width="formLabelWidth">
            <el-input v-model="sysMenu.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" :label-width="formLabelWidth">
            <el-input v-model="sysMenu.component" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="sysMenu.status" placeholder="请选择菜单类型">
              <el-option
                v-for="(item, index) in menuStatusList"
                :key="index"
                :label="item.status"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="sysMenu.type == 2"
            label="权限标识"
            :label-width="formLabelWidth"
          >
            <el-input v-model="sysMenu.perms" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogFormVisible = false;
              parentMenu = [];
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="sysMenu.id ?update(sysMenu) : save()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 列表 -->
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="菜单图标" width="180">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 0" type="danger">目录</el-tag>
          <el-tag v-if="scope.row.type == 1" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.type == 2" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="菜单名称" width="180">
      </el-table-column>
      <el-table-column prop="path" label="路由" width="180"> </el-table-column>
      <el-table-column prop="component" label="组件地址"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="perms" label="权限标识"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as api from "@/api/system/auth/auth";
export default {
  data() {
    return {
      menuList: [],
      searchObj: {},
      sysMenu: {},
      parentMenu: [],
      menuTypeList: [
        { code: 0, name: "目录" },
        { code: 1, name: "菜单" },
        { code: 2, name: "按钮" },
      ],
      menuStatusList:[
        {code:1,status:'可用'},
        {code:0,status:'禁用'}
      ],
      formLabelWidth: "100",
      dialogFormVisible: false,
    };
  },
  methods: {
    getParentMenu() {
      api
        .getParentMenu()
        .then((response) => {
          this.parentMenu.push({ id: 0, name: "顶级菜单" });
          for (var i = 0; i < response.data.length; i++) {
            if (
              response.data[i].children != null ||
              response.data[i].children != []
            ) {
              this.parentMenu.push(response.data[i]);
            }
          }
        })
        .catch((response) => {});
    },
    fetchData() {
      api
        .getList()
        .then((response) => {
          this.menuList = response.data;
        })
        .catch((response) => {
          this.$$message().error("数据获取失败");
        });
    },
    searchMenu(searchObj) {
      api
        .getByID(searchObj)
        .then((response) => {
          this.menuList = response.data;
        })
        .catch((response) => {
          this.$$message().error("数据获取失败");
        });
    },
    handleEdit(menu) {
      this.getParentMenu()
      this.dialogFormVisible = true
      this.sysMenu = menu
    },
    update(sysMenu) {
      api.update(sysMenu).then((response) => {
        this.$message.success("修改成功");
        this.sysMenu = {};
        this.parentMenu = [];
        this.dialogFormVisible = false;
        this.fetchData()
        this.$router.go(0)
      });
    },
    handleDelete(id) {
      api
        .remove(id)
        .then((response) => {
          this.$message.success("删除成功")
          this.fetchData()
          this.$router.go(0)
        })
        .catch((response) => {
          this.fetchData()
          this.$router.go(0)
        });
    },
    handleSave(){
      this.getParentMenu()
      this.sysMenu = {}
      this.dialogFormVisible = true
    },
    save(){
      api.save(this.sysMenu)
      .then(response=>{
        this.$message(response.data)
        this.sysMenu = {}
        this.dialogFormVisible = false
        this.$router.go(0)
      })
      .catch(response=>{
        this.$message.error(response.data)
        this.$router.go(0)
      })
    }
  },
  created() {
    this.fetchData()
  },
};
</script>
<style scoped>
.table-header {
  margin-bottom: 10px;
}
</style>